{% include 'front/header.html' %}
<div class="layui-container">
    <div class="layui-card" style="width: 300px; margin: 100px auto;">
        <div class="layui-card-body">
            <form class="layui-form" action="" lay-filter="registerForm">
                <div class="layui-form-item">
                    <label class="layui-form-label">用户名</label>
                    <div class="layui-input-block">
                        <input type="text" id="username" name="username" required lay-verify="required" placeholder="请输入用户名"
                               autocomplete="off" class="layui-input">
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">密码</label>
                    <div class="layui-input-block">
                        <input type="password" id="password" name="password" required lay-verify="required" placeholder="请输入密码"
                               autocomplete="off" class="layui-input">
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">确认密码</label>
                    <div class="layui-input-block">
                        <input type="password" id="confirm_password" name="confirm_password" required lay-verify="required"
                               placeholder="请确认密码" autocomplete="off" class="layui-input">
                    </div>
                </div>
                <div class="layui-form-item">
                    <div class="layui-input-block">
                        <button class="layui-btn" lay-submit lay-filter="submitForm">注册</button>
                    </div>
                </div>
            </form>
        </div>
    </div>
</div>
<script>
    layui.use('form', function(){
      var form = layui.form;

      // 提交表单的监听
      form.on('submit(submitForm)', function(data){
        // 这里可以发送AJAX请求进行注册操作
        var username = $('#username').val();
        var password = $('#password').val();
        var confirm_password = $('#confirm_password').val();
        if(password != confirm_password){
            layer.msg('密码和确认密码不一致，请确认');
            return false;
        }
        var json = {"username" : username, "password" : password};
        $.ajax({
                url: '/reg/api',
                type: 'post',
                xhrFields: {
                    withCredentials: true
                },
                crossDomain: true,
                headers : {
                    'Content-Type' : 'application/x-www-form-urlencoded'
                },
                contentType :'application/x-www-form-urlencoded',
                dataType : "json",
                data: JSON.stringify(json),
                success: function (data) {
                    if(data.code == 0){
                        window.location.href="/member";
                    }else{
                        $("#login_msg").text(data.msg);
                    }
                }
            });
        console.log(data.field); // 打印表单的字段
        return false; // 阻止表单默认提交事件
      });
    });
</script>
</body>
</html>